<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>仿QQ好友分组测试</title>
		<style>
			table {
				width: 223px;
				border: 2px solid #00ffff;
				border-collapse: collapse;
				margin: 12px auto;
				/* background: #98FB98; */
			}
			table td {
				padding: 0px 0px;
				background: #FFFF00;
				border: 2px solid #00ffff;
			}
			table td span {
				background: #70884c;
				color: hotpink;
				/* width: 100%; */
				text-align: center;
				display: block;
				/* margin: 4px 0px; */
				border: none;
				cursor: pointer;
			}
			
			table td div {
				background: red;
			}
		</style>
		<script src="../js/jquery-1.8.3.min.js"></script>
		<script>
			$(function(){
				$("span").each(function(){
					$(this).click(function(){
						// 1.切换分组是否显示和隐藏
						$(this).next("div").toggle();
						// 2.隐藏其他的分组
						$(this).parents("tr").siblings().find("div").hide();
					});
				});
			});
		</script>
	</head>
	<body>
		<table>
			<tr>
				<td>
					<span>家人</span>
					<div style="display: none">
						家人01<br />
						家人02<br />
						家人03<br />
						家人04<br />
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<span>同事</span>
					<div style="display: none">
						同事01<br />
						同事02<br />
						同事03<br />
						同事04<br />
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<span>同学</span>
					<div style="display: none">
						同学01<br />
						同学02<br />
						同学03<br />
						同学04<br />
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<span>朋友</span>
					<div style="display: none">
						朋友01<br />
						朋友02<br />
						朋友03<br />
						朋友04<br />
						朋友05<br />
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>
